<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>分配岗位</title>
    <style type="text/css">
        table {


            background-color: #cccccc;

        }
        caption{
            font-size: 18px;
            font-weight: 700;
        }

        .small01 {
            width: 125px;
            height: 270px;
            background-color: white;
            margin-top: 20px;
            margin-left: 5px;
        }

        .small02 {
            width: 125px;
            height: 270px;
            background-color: white;
            margin-top: 20px;
            margin-left: 5px;
        }


        .small03 {
            width: 125px;
            height: 270px;
            background-color: white;
            margin-top: 20px;
            margin-left: 5px;
        }

        .small04 {
            width: 125px;
            height: 270px;
            background-color: white;
            margin-top: 20px;
            margin-left: 5px;
        }

        .git01 {

            margin-top: 15px;
            margin-left: 30px;
        }

        .git02 {

            margin-top: 20px;
            margin-left: 5px;
        }

        .git03 {

            margin-top: -69px;
            margin-left: 60px;
        }

        .git04 {
            margin-top: 10px;
            margin-left: 35px;

        }
    </style>

</head>
<script type="text/javascript">
    function one(){
		document.getElementById("01").src="./img/renwu.png";
	}
    function two(){
		document.getElementById("02").src="./img/renwu.png";
	}
    function three(){
		document.getElementById("03").src="./img/renwu.png";
	}
    function four(){
		document.getElementById("04").src="./img/renwu.png";
	}


    function ones(){
		document.getElementById("05").src="./img/renwu.png";
	}
    function twos(){
		document.getElementById("06").src="./img/renwu.png";
	}
    function threes(){
		document.getElementById("07").src="./img/renwu.png";
	}
    function fours(){
		document.getElementById("08").src="./img/renwu.png";
	}

    function onea(){
		document.getElementById("09").src="./img/renwu.png";
	}
    function twoa(){
		document.getElementById("10").src="./img/renwu.png";
	}
    function threea(){
		document.getElementById("11").src="./img/renwu.png";
	}
    function foura(){
		document.getElementById("12").src="./img/renwu.png";
	}

    function oneb(){
		document.getElementById("13").src="./img/renwu.png";
	}
    function twob(){
		document.getElementById("14").src="./img/renwu.png";
	}
    function threeb(){
		document.getElementById("15").src="./img/renwu.png";
	}
    function fourb(){
		document.getElementById("16").src="./img/renwu.png";
	}
    </script>
	 
<body>
    <table width="560px" height="405px" rules="none" cellpadding="0" align="center" cellspacing="0">
        <caption>分配岗位</caption>

        <tr>
            <th>位置1</th>
            <th>位置2</th>
            <th>位置3</th>
            <th>位置4</th>
        </tr>

        <tr>
            <td>
                <div class="small01">
                    <div class="git01"  ><img src="./img/gongcheng.png" id="01" onclick="one()" /></div>
                    <div class="git02"><img src="./img/jishu.png"  id="02" onclick="two()"  /></div>
                    <div class="git03"><img src="./img/caozuo.png" id="03" onclick="three()"/></div>
                    <div class="git04"><img src="./img/zhijian.png" id="04" onclick="four()"/></div>

                </div>
            </td>

            <td>
                <div class="small02">
                    <div class="git01"  ><img src="./img/gongcheng.png" id="05" onclick="ones()" /></div>
                    <div class="git02"><img src="./img/jishu.png"  id="06" onclick="twos()"  /></div>
                    <div class="git03"><img src="./img/caozuo.png" id="07" onclick="threes()"/></div>
                    <div class="git04"><img src="./img/zhijian.png" id="08" onclick="fours()"/></div>


                </div>
            </td>
            <td>
                <div class="small03">
                    <div class="git01"  ><img src="./img/gongcheng.png" id="09" onclick="onea()" /></div>
                    <div class="git02"><img src="./img/jishu.png"  id="10" onclick="twoa()"  /></div>
                    <div class="git03"><img src="./img/caozuo.png" id="11" onclick="threea()"/></div>
                    <div class="git04"><img src="./img/zhijian.png" id="12" onclick="foura()"/></div>

                </div>
            </td>
            <td>
                <div class="small04">
                    <div class="git01"  ><img src="./img/gongcheng.png" id="13" onclick="oneb()" /></div>
                    <div class="git02"><img src="./img/jishu.png"  id="14" onclick="twob()"  /></div>
                    <div class="git03"><img src="./img/caozuo.png" id="15" onclick="threeb()"/></div>
                    <div class="git04"><img src="./img/zhijian.png" id="16" onclick="fourb()"/></div>

                </div>
            </td>
        </tr>




    </table>


    </div>

</body>

</html>